<div class="header">
  <h2>Draft my schedule system</h2>
  <div class="website-introduction">
    The web application is used for searching Western timetable that provides the functionality of current online timetable. In addition this web application also provide the ability to create an account, save and edit lists of courses for logged in users, ability to publish these lists as well as the ability to add comments/ratings to individual courses.
  </div>
  <a mat-button routerLink="/" routerLinkActive="active">Home</a>
  <span class="name" *ngIf="userStatus === 'login'">{{ userInfo.name }}</span>
  <a *ngIf="userStatus === 'unlogin'" mat-button routerLink="/login" routerLinkActive="active">Login</a>
  <a *ngIf="userStatus === 'unlogin'" mat-button routerLink="/register" routerLinkActive="active">Sign Up</a>
  <button *ngIf="userStatus === 'login'" mat-button (click)="onSighOut()">Sign Out</button>
</div>